<template>
  <!-- eslint-disable vue/require-v-for-key  -->

  <div class="drag">
    <!-- <vue-drag-resize
      v-for="(item, index) in componentsList"
      
      parentLimitation
      @click.native="changeComponent(item)"
      @contextmenu.prevent.native="openMenu($event, item)"
    > -->
    <!-- @resizing="(e) => resizing(e, item.id)" -->
    <template v-for="(item, index) in componentsList">
      <drag-site
        :params="item"
        :dragObj="dragObj"
        :key="index"
        @openMenu="openMenu"
        @changeComponent="changeComponent"
        @getRefLineParams="getRefLineParams"
      ></drag-site>
    </template>
    <!--辅助线-->
    <span
      class="ref-line v-line"
      v-for="item in vLine"
      v-show="item.display"
      :style="{
        left: item.position,
        top: item.origin,
        height: item.lineLength,
      }"
    />
    <span
      class="ref-line h-line"
      v-for="item in hLine"
      v-show="item.display"
      :style="{ top: item.position, left: item.origin, width: item.lineLength }"
    />
    <!--辅助线END-->
    <!-- </vue-drag-resize> -->
    <ul
      v-show="visible"
      :style="{ left: left + 'rem', top: top + 'rem' }"
      class="contextmenu"
    >
      <li @click="remove(params)">
        <i class="el-icon-delete denger"></i>删除组件
      </li>
      <li @click="copy(params)">
        <i class="el-icon-copy-document info"></i>复制组件
      </li>
      <li @click="save(params)">
        <i class="el-icon-copy-document info"></i>保存组件
      </li>
      <li @click="changeZIndex(params, 'first')">
        <i class="el-icon-top success"></i>置顶组件
      </li>
      <li @click="changeZIndex(params, 'last')">
        <i class="el-icon-bottom info"></i>置底组件
      </li>
      <li @click="changeZIndex(params, 'prev')">
        <i class="el-icon-arrow-up success"></i>上移一层
      </li>
      <li @click="changeZIndex(params, 'next')">
        <i class="el-icon-arrow-down info"></i>下移一层
      </li>
    </ul>
  </div>
</template>
<script>
import { createNamespacedHelpers, mapGetters } from "vuex";
const { mapMutations } = createNamespacedHelpers("view");
import dragSite from "./dragSite.vue";
import common from "./common";
export default {
  mixins: [common],
  components: {
    dragSite,
  },
  data() {
    return {
      left: 0,
      top: 0,
      visible: false,
      params: null,
      dragObj: {},
      vLine: [],
      hLine: [],
    };
  },
  computed: {
    ...mapGetters(["componentsList", "component"]),
  },
  watch: {
    visible(value) {
      if (value) {
        document.body.addEventListener("click", this.closeMenu);
      } else {
        document.body.removeEventListener("click", this.closeMenu);
      }
    },
  },
  methods: {
    ...mapMutations({
      setComponentsList: "SET_COMPONENTS_LIST",
      setComponent: "SET_COMPONENT",
      removeComponentsList: "REMOVE_COMPONENTS_LIST",
      changeComponent: "CHANGE_COMPONENT",
      updateComponentsList: "UPDATE_COMPONENTS_LIST",
      saveHtmlComponent: "SAVE_HTMLCOMPONENT",
    }),
    changeZIndex(parmas, type) {
      if (type === "prev") {
        parmas["z-index"]++;
      } else if (type === "next") {
        if (parmas["z-index"] <= 0) {
          this.$message.error("层级不能小于0");
        } else {
          parmas["z-index"]--;
        }
      } else if (type === "last") {
        let zIndex = Math.min.apply(
          Math,
          this.componentsList.map((item) => item["z-index"])
        );
        if (zIndex - 1 <= 0) {
          this.$message.error("层级不能小于0");
        } else {
          parmas["z-index"] = zIndex - 1;
        }
      } else if (type === "first") {
        let zIndex = Math.max.apply(
          Math,
          this.componentsList.map((item) => item["z-index"])
        );
        parmas["z-index"] = zIndex + 1;
      }
    },
    getRefLineParams(params) {
      const { vLine, hLine } = params;
      this.vLine = vLine;
      this.hLine = hLine;
    },
    openMenu(e, params) {
      const menuMinWidth = 105;
      const offsetLeft = this.$el.getBoundingClientRect().left; // container margin left
      const offsetWidth = this.$el.offsetWidth; // container width
      const maxLeft = offsetWidth - menuMinWidth; // left boundary
      const left = e.clientX - offsetLeft; // 15: margin right

      if (left > maxLeft) {
        this.left = maxLeft;
      } else {
        this.left = left;
      }
      this.top = e.clientY - 100;
      this.visible = true;
      this.params = params;
    },
    closeMenu() {
      this.visible = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.drag {
  width: 1440rem;
  height: 800rem;
  // height: calc(100vh - 51rem);
  position: relative;
  .contextmenu {
    margin: 0;
    background: #fff;
    z-index: 3000;
    position: absolute;
    list-style-type: none;
    padding: 5px 0;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 400;
    color: #333;
    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
    li {
      margin: 0;
      padding: 7px 16px;
      cursor: pointer;
      &:hover {
        background: #eee;
      }
      i {
        padding-right: 5px;
      }
      .denger {
        color: #fa1a1a;
      }
      .success {
        color: rgb(41, 207, 41);
      }
      .info {
        color: rgb(170, 213, 219);
      }
    }
  }
}
</style>